<template>
 <div style="padding: 16px 20px;width: 100%;height: 100%;position: relative;overflow-y: hidden;">
    <div style="width: calc(100% - 420px);height: 100%;border-radius: 5px;background-color: white;display: inline-block;">
        <div style="width: 100%;padding: 20px 20px;border-bottom: 1px solid rgb(230,230,230);">
            体验卡管理
        </div>
        <div style="width: 100%;height: calc(100% - 56.76px);">
            <div style="width: 100%;padding: 20px 20px;padding-bottom: 0;">
        <span>
          <div style="display: inline-block;width: calc(33% - 4px);">
            序列号
            <a-input v-model="searchForm.keyString" allow-clear style="border: 0px;border-bottom: 1px solid rgb(0,120,215);background-color: white;padding: 0 0;height: 35px;" placeholder="请输入序列号"></a-input>
          </div>
        </span>
        <span>
          <div style="display: inline-block;width: calc(33% - 4px);margin-left: 6px;">
            账号
            <a-input v-model="searchForm.account" allow-clear style="border: 0px;border-bottom: 1px solid rgb(0,120,215);background-color: white;padding: 0 0;height: 35px;" placeholder="请输入账号"></a-input>
          </div>
        </span>
        <span>
          <div style="display: inline-block;width: calc(33% - 4px);margin-left: 6px;">
            有效年份
            <a-input v-model="searchForm.year" allow-clear style="border: 0px;border-bottom: 1px solid rgb(0,120,215);background-color: white;padding: 0 0;height: 35px;" placeholder="请输入有效年份"></a-input>
          </div>
        </span>
            </div>
            <div style="width: 100%;text-align: right;margin-top: 10px;margin-bottom: 10px;padding: 0 20px;padding-right: 25px;">
                <a-button style="padding: 0 30px;" :loading="isSearching" @click="()=>{
                    searchForm.keyString='';
                    searchForm.account='';
                    searchForm.year='';
                    getAll();
                }">显示全部</a-button>
                <a-button style="padding: 0 30px;margin-left: 10px;" type="primary" :loading="isSearching" @click="getAll">查找</a-button>
            </div>
            <div style="width: 100%;height: calc(100% - 123.09px);padding: 20px 20px;overflow-y: scroll;padding-top: 0px;">
                <a-table :data="vips" :columns="[
                    {
                        title:'序列号',
                        dataIndex:'keyString'
                    },
                    {
                        title:'账号',
                        dataIndex:'account'
                    },
                    {
                        title:'有效年份',
                        dataIndex:'year'
                    },
                ]"></a-table>
            </div>
        </div>
    </div>
    <div style="width: 400px;height: 100%;border-radius: 5px;background-color: white;display: inline-block;float: right;position: relative;">
        <div v-if="rightPageId==0">
            <div style="padding: 20px 20px;border-bottom: 1px solid rgb(230,230,230);">
                菜单
            </div>
            <div style="width: 100%;height: calc(100% - 56.76px);overflow-y: scroll;padding: 10px 10px;">
                <div class="right-button" @click="rightPageId=1" :class="selectedKey==item?['right-button-selected']:[]">
                    导入VIP卡
                    <svg width="15" height="15" viewBox="0 0 48 48" fill="currentColor"><path fill-rule="evenodd" clip-rule="evenodd" d="M32.556 24L16.293 7.737a1 1 0 010-1.415l1.414-1.414a1 1 0 011.414 0L36.8 22.586a2 2 0 010 2.828L19.121 43.092a1 1 0 01-1.414 0l-1.414-1.414a1 1 0 010-1.414L32.556 24z" fill="currentColor"/></svg>
                </div>
            </div> 
        </div>
        <div v-if="rightPageId==1">
            <div style="padding: 20px 20px;font-size: 14px;border-bottom: 1px solid var(--color-neutral-4);position: relative;padding-left: 55px;">
            <div style="padding: 20px 20px;position: absolute;left: 0;top: 0;cursor: pointer;" @click="()=>{
                rightPageId=0
            }">
              <svg width="15" height="15" viewBox="0 0 48 48" fill="currentColor"><path fill-rule="evenodd" clip-rule="evenodd" d="M15.272 24l16.263 16.264a1 1 0 010 1.414l-1.414 1.414a1 1 0 01-1.414 0L11.03 25.414a2 2 0 010-2.828L28.706 4.908a1 1 0 011.414 0l1.415 1.414a1 1 0 010 1.415L15.271 24z" fill="currentColor"/></svg>
            </div>
              导入VIP卡
            </div>
            <div style="width: 100%;height: calc(100% - 56.76px);padding: 20px 20px;overflow-y: scroll;padding-right: 15px;">
                序列号
                <a-textarea v-model="inputKeyStrings" style="border: 1px solid rgb(0,120,215);background-color: white;margin-top: 10px;margin-bottom: 10px;" placeholder="请输入序列号（例如SDJCI-478DJ-02HCG-3JHXS-ASKF9,543C3-47DH7-10SXJ-29SGB-10WSK,SHXU4-G7SJ3-9785X-OD93F-SJX5A）" :auto-size="{
    minRows:20,
    maxRows:20
  }"></a-textarea>
                有效年份
                <a-input v-model="inputYear" style="width: 100%;height: 35px;border: 0;border-bottom: 1px solid rgb(0,120,215);padding: 0 0;background-color: white;margin-bottom: 0px;" allow-clear placeholder="有效年份（例如2024）"></a-input>
                <div style="text-align: right;margin-top: 10px;">
                    <a-button style="padding: 0 30px;" type="primary" @click="importToBackGround">导入</a-button>
                </div>
            </div>
        </div>
    </div>
 </div>
</template>

<script>
import axios from 'axios';

export default{
  data(){
    return{
      searchForm:{
        keyString:'',
        account:'',
        year:''
      },
      isSearching:false,
      rightPageId:0,
      isImporting:false,
      inputKeyStrings:'',
      inputYear:'',
      vips:[],
    }
  },
  mounted(){
    this.getAll();
  },
  methods:{
    getAll(){
        this.isSearching=true;
        var config = {
   method: 'get',
   url: '/api/v1/vip/search?data=' + JSON.stringify(this.searchForm),
   headers: { 
      'Accept': '*/*'
   }
};

axios(config)
.then((res) => {
    this.isSearching=false;
   if(res.data.status==1){
    this.vips=res.data.results;
   }else{
    this.$message.error({
        content:res.data.content
    })
   }
})
    },
    importToBackGround(){
        if(this.inputKeyStrings==''){
            this.$message.error({
                content:'请输入包含序列号的数组',
            })
            return;
        }
        if(this.inputYear==''){
            this.$message.error({
                content:'请输入有效年份'
            })
            return;
        }
        this.isImporting=true;
      var config = {
        method: 'post',
        url: '/api/v1/vip/import',
        headers: { 
            'Accept': '*/*', 
        },
        data : JSON.stringify({
            data:this.inputKeyStrings,
            year:this.inputYear
        } ) 
      };
      
      axios(config)
      .then((res) => {
        this.isImporting=false;
        if(res.data.status==1){
          this.rightPageId=0;
        }else{
          this.$message.error({
            content:res.data.content
          })
        }
      })
    }
  },
  props:{

  },
}
</script>

<style scoped>

.right-button svg{
  position: absolute;
  right: 15px;
  top: 15px;
}

.right-button:hover{
  background-color: rgb(242,242,242);
}

.right-button{
  width: 100%;
  padding: 15px 15px;
  border-radius: 5px;
  cursor: pointer;
  line-height: 15px;
  position: relative;
  margin-bottom: 5px;
}

</style>